<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	
		   <div id="app">
			            <!-- 1.事件调用的方法没有参数 -->
			            <button v-on:click="btn1Click()">按钮1</button>
			            <button @click="btn1Click">按钮1</button>
			            
			            <!-- 2.在事件定义时，写方法时省略了小括号，但是方法本身需要一个参数的，这个时候，Vue会默认将浏览器生成的event事件对象作为参数传入到方法 -->
			            <button @click="btn2Click">按钮2</button>
			            
			            <!-- 3.方法定义时，我们需要event对象，同时也需要其他参数 -->
			            <!-- 在调用方式，如何手动的获取到浏览器的event对象：$event -->
			            <button @click="btn3Click(param,$event)">按钮3</button>
			        </div>
			
	


		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					message: 'hello',
					param:'param'
				},
				methods:{
					btn1Click(){
						console.log('btn1Click');
					},
					btn2Click(event){
						console.log('btn2Click',event);
					},
					btn3Click(param,event){
						console.log('btn3Click',param,event);
					}
					
				}
			});
		</script>

	</body>
	
</html>
